<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" content="width=device-width, initial-scale=1" name="viewport" />

    <link href="favicon.ico" rel="shortcut icon">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="一个简洁美观的图形化工具">
    <meta name="keywords" content="网页开发,图形化,blockly,积木编程,编辑器,woxy,网页开发助手">
    <meta name="author" content="Woxy Team">

    <title>Woxy - 图形化网页开发工具</title>

    <link href="./css/welcome.css" rel="stylesheet" />

    <script src="./js/jquery.min.js"></script>
    <script src="./js/sweetalert.js"></script>
    <script src="./js/dark.js"></script>

</head>

<body>
    <div class="bg"></div>
    <header>
        <div class="link">
            <a href="https://gitee.com/svipwing/woxy" target="_blank">
                <img src="./image/gitee.svg">
            </a>
            <img id="qq" src="./image/qq.svg" style="cursor: pointer;">
        </div>
    </header>

    <div class="intro">
        <div class="left">
            <img src="./image/logo_new.png" width="100px" height="100px">
            <h1 style="margin-top: 24px;margin-left: -1px;">Woxy</h1>
            <p style="font-size: 24px;margin-top: 8px;">图形化网页开发工具，让世界上没有难做的网页</p>
            <button onclick="window.location.href='/index1.html'" style="margin-top: 48px;">开始使用</button>
        </div>
        <div class="right">
            <img src="./image/illus.svg" width="100%">
        </div>
    </div>

    <div class="group">
        <div class="card">
            <h3>操作简单</h3>
            <p style="margin-top: 8px;margin-bottom: 8px;">文档详细，小白易懂</p>
        </div>
        <div class="card">
            <h3>界面清爽</h3>
            <p style="margin-top: 8px;margin-bottom: 8px;">界面简洁，功能直达</p>
        </div>
        <div class="card">
            <h3>生成代码</h3>
            <p style="margin-top: 8px;margin-bottom: 8px;">一键生成，高效开发</p>
        </div>
        <div class="card">
            <h3>实时预览</h3>
            <p style="margin-top: 8px;margin-bottom: 8px;">快捷预览，无惧调试</p>
        </div>
    </div>

    <h2 style="margin-top: 64px;margin-left: -3px;">更新历史</h2>
    <p id="history" style="margin-top: 24px;">暂无</p>

    <h2 style="margin-top: 64px;margin-left: -3px;">开发团队</h2>
    <div class="group" style="margin-top: 24px;">
        <div class="card">
            <img class="avatar" src="https://q1.qlogo.cn/g?b=qq&nk=3260130869&s=640">
            <h3 style="margin-top: 8px;">jishuya</h3>
            <p style="margin-top: 8px;margin-bottom: 8px;">创始人，前后端开发者、页面设计</p>
        </div>
        <div class="card">
            <img class="avatar" src="https://creation.codemao.cn/716/appcraft/IMAGE_Ees2xtBxc_1723987945518.jpg">
            <h3 style="margin-top: 8px;">海藻酸钠</h3>
            <p style="margin-top: 8px;margin-bottom: 8px;">UI设计、前端开发者，官网重构</p>
        </div>
        <div class="card">
            <img class="avatar" src="https://q1.qlogo.cn/g?b=qq&nk=3550484699&s=640">
            <h3 style="margin-top: 8px;">WA</h3>
            <p style="margin-top: 8px;margin-bottom: 8px;">后端开发者，打包服务器研发</p>
        </div>
        <div class="card">
            <img class="avatar" src="https://q1.qlogo.cn/g?b=qq&nk=3463448740&s=640">
            <h3 style="margin-top: 8px;">青柠
                <div
                    style="display: inline-block;position: relative;background:#F8EFC3;color:#C19A26;border:solid 1px #C19A26;border-radius:2.5px;width:25px;height:1.5px;font-size: 12px;padding: 8px;">
                    <img src="./image/flash.gif" style="position:absolute;top:0;left:0;width:43px;height:100%;">
                    <span style="position: absolute;display: inline;align-items: center;top:2.5px;left:7.5px;">大佬</span>
                </div>
            </h3>
            <p style="margin-top: 8px;margin-bottom: 8px;">前后端开发者，账号系统&云作品开发</p>
        </div>
        <div class="card">
            <img class="avatar" src="https://q1.qlogo.cn/g?b=qq&nk=3332760455&s=640">
            <h3 style="margin-top: 8px;">酶游明</h3>
            <p style="margin-top: 8px;margin-bottom: 8px;">前端开发者，编辑器UI大优化</p>
        </div>
        <div class="card">
            <img class="avatar" src="https://q1.qlogo.cn/g?b=qq&nk=3492416851&s=640">
            <h3 style="margin-top: 8px;">ZX</h3>
            <p style="margin-top: 8px;margin-bottom: 8px;">积木开发者，新增积木</p>
        </div>
        <div class="card">
            <img class="avatar" src="https://q1.qlogo.cn/g?b=qq&nk=2706176719&s=640">
            <h3 style="margin-top: 8px;">king2022</h3>
            <p style="margin-top: 8px;margin-bottom: 8px;">前端开发者</p>
        </div>
        <div class="card">
            <img class="avatar" src="https://q1.qlogo.cn/g?b=qq&nk=38888678&s=640">
            <h3 style="margin-top: 8px;">Fgaoxing</h3>
            <p style="margin-top: 8px;margin-bottom: 8px;">UI设计、前端开发者</p>
        </div>
        <div class="card">
            <img class="avatar" src="https://q1.qlogo.cn/g?b=qq&nk=1130511366&s=640">
            <h3 style="margin-top: 8px;">CoolPlayLin</h3>
            <p style="margin-top: 8px;margin-bottom: 8px;">全能开发者，精通前后端</p>
        </div>
        <div class="card">
            <img class="avatar" src="https://q1.qlogo.cn/g?b=qq&nk=2667174454&s=640">
            <h3 style="margin-top: 8px;">可执行程序</h3>
            <p style="margin-top: 8px;margin-bottom: 8px;">彩蛋开发者</p>
        </div>
    </div>

    <div class="footer">
        <center>
            <p id="sitetime" style="margin-bottom: 15px;"></p>
            <p>&copy;2020～<span id="year">现在</span> Woxy Team</p>
        </center>
    </div>

    <script src="./js/sitetime.js"></script>
    <script src="./js/gitee.js"></script>
    <script src="./js/yh.js"></script>

    <script>
        const button = document.createElement('button');
        button.innerText = '🌙';
        button.style.width = '50px';
        button.style.height = '50px';
        button.style.position = 'fixed';
        button.style.bottom = '20px';
        button.style.right = '20px';
        button.style.padding = '10px';
        button.style.borderRadius = '50%';
        button.style.border = 'none';
        button.style.backgroundColor = '#333';
        button.style.color = '#fff';
        button.style.cursor = 'pointer';
        button.style.zIndex = '1000';

        let darkModeEnabled = false;

        button.onclick = () => {
            darkModeEnabled = !darkModeEnabled;
            if (darkModeEnabled) {
                DarkReader.enable({});
                button.innerText = '☀️';
            } else {
                DarkReader.disable();
                button.innerText = '🌙';
            }
        };

        document.body.appendChild(button);

        function isMobile() {
            const userAgentInfo = navigator.userAgent;
            const mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
            let mobileFlag = false;
            for (let i = 0; i < mobileAgents.length; i++) {
                if (userAgentInfo.indexOf(mobileAgents[i]) > 0) {
                    mobileFlag = true;
                    break;
                }
            }
            return mobileFlag;
        }

        if (isMobile()) {
            $(".right").hide();
            $('.intro').addClass("flex-col");
            $('.group').addClass("grid-1");
            $('body').css('padding', '16px 32px');
        }

        now = new Date();
        document.getElementById("year").innerHTML = now.getFullYear();

        $("#qq").click(function () {
            swal({ 'title': '加入QQ交流群', 'text': '群号：135452025' });
        });
    </script>

</body>

</html>